//接收2个参数
import React, { useState, useEffect } from 'react';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import axios from 'axios';

const StockChart1 = ({ code, frequency }) => {
  const [chartOptions, setChartOptions] = useState({});

  useEffect(() => {
    if (!code || !frequency) return;

    Highcharts.setOptions({
      lang: {
        rangeSelectorZoom: ''
      }
    });

    // Setting month value based on frequency
    let monthValue;
    if (frequency === "5" || frequency === "15") {
      monthValue = "1";
    } else if (frequency === "30") {
      monthValue = "2";
    } else if (frequency === "60") {
      monthValue = "3";
    }

    const payload = {
      code: code,
      month: monthValue,
      frequency: frequency  // 使用传入的frequency参数
    };

    axios.post('/api/stock/stock_kline', payload)
    //axios.get('/stock-data.json')
      .then(response => {
        const rawData = response.data.data.data;
        let ohlc = [], volume = [];

        console.log("获得的数据是:", rawData);

        rawData.forEach(item => {
          const year = parseInt(item.date.substring(0, 4), 10);
          const month = parseInt(item.date.substring(5, 7), 10) - 1; // 月份从0开始计数
          const day = parseInt(item.date.substring(8, 10), 10);
          const hour = parseInt(item.time.substring(8, 10), 10);
          const minute = parseInt(item.time.substring(10, 12), 10);
          const second = parseInt(item.time.substring(12, 14), 10);

          const utcTimestamp = Date.UTC(year, month, day, hour, minute, second);

          ohlc.push([
            utcTimestamp, // 时间戳
            parseFloat(item.open),   // 开盘价
            parseFloat(item.high),   // 最高价
            parseFloat(item.low),    // 最低价
            parseFloat(item.close)   // 收盘价
          ]);
          volume.push([
            utcTimestamp,  // 时间戳
            parseInt(item.volume)  // 成交量
          ]);
        });

        setChartOptions({
          rangeSelector: {
            selected: 1,
            inputDateFormat: '%Y-%m-%d'
          },
          xAxis: {
            dateTimeLabelFormats: {
              millisecond: '%H:%M:%S.%L',
              second: '%H:%M:%S',
              minute: '%H:%M',
              hour: '%H:%M',
              day: '%m-%d',
              week: '%m-%d',
              month: '%y-%m',
              year: '%Y'
            }
          },
          tooltip: {
            split: false,
            shared: true,
          },
          yAxis: [{
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: '股价'
            },
            height: '65%',
            resize: {
              enabled: true
            },
            lineWidth: 2
          }, {
            labels: {
              align: 'right',
              x: -3
            },
            title: {
              text: '成交量'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
          }],
          series: [{
            type: 'candlestick',
            name: code,
            color: 'green',  // 跌时的颜色
            lineColor: 'green',
            upColor: 'red',  // 涨时的颜色
            upLineColor: 'red',
            data: ohlc,
            id: 'sz'
          }, {
            type: 'column',
            name: '成交量',
            data: volume,
            yAxis: 1
          }]
        });
      })
      .catch(error => {
        console.error('Error fetching stock data:', error);
      });
  }, [code, frequency]);  // 添加frequency到依赖数组中

  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType={'stockChart'}
      options={chartOptions}
    />
  );
};

export default StockChart1;
























//无frequency参数版本
// import React, { useState, useEffect } from 'react';
// import Highcharts from 'highcharts/highstock';
// import HighchartsReact from 'highcharts-react-official';
// import axios from 'axios';

// const StockChart = ({ code }) => {
//   const [chartOptions, setChartOptions] = useState({});

//   useEffect(() => {
//     if (!code) return;

//     Highcharts.setOptions({
//       lang: {
//         rangeSelectorZoom: ''
//       }
//     });

//     const payload = {
//       code: code,
//       month: "12",
//       frequency: "d"
//   };

//     axios.post('api/stock/stock_kline', payload)
//     //axios.get('./stock-data.json')
//       .then(response => {
//         const rawData = response.data.data.data;
//         let ohlc = [], volume = [];

//         console.log("收到的数据为:", response)
//         console.log("rawData:", rawData)

//         rawData.forEach(item => {
//           const year = parseInt(item.date.substring(0, 4), 10);
//           const month = parseInt(item.date.substring(5, 7), 10) - 1; // 月份从0开始计数
//           const day = parseInt(item.date.substring(8, 10), 10);
//           const hour = parseInt(item.time.substring(8, 10), 10);
//           const minute = parseInt(item.time.substring(10, 12), 10);
//           const second = parseInt(item.time.substring(12, 14), 10);

//           const utcTimestamp = Date.UTC(year, month, day, hour, minute, second);

//           console.log("收到的数据为:", year, month, day, hour, minute, second)

//           ohlc.push([
//             utcTimestamp, // 时间戳
//             parseFloat(item.open),   // 开盘价
//             parseFloat(item.high),   // 最高价
//             parseFloat(item.low),    // 最低价
//             parseFloat(item.close)   // 收盘价
//           ]);
//           volume.push([
//             utcTimestamp,  // 时间戳
//             parseInt(item.volume)  // 成交量
//           ]);
//         });

//         // 图表配置
//         setChartOptions({
//             rangeSelector: {
//               selected: 1,
//               inputDateFormat: '%Y-%m-%d'
//             },
//             title: {
//               text: '平安银行历史股价'
//             },
//             xAxis: {
//               dateTimeLabelFormats: {
//                 millisecond: '%H:%M:%S.%L',
//                 second: '%H:%M:%S',
//                 minute: '%H:%M',
//                 hour: '%H:%M',
//                 day: '%m-%d',
//                 week: '%m-%d',
//                 month: '%y-%m',
//                 year: '%Y'
//               }
//             },
//             tooltip: {
//               split: false,
//               shared: true,
//             },
//             yAxis: [{
//               labels: {
//                 align: 'right',
//                 x: -3
//               },
//               title: {
//                 text: '股价'
//               },
//               height: '65%',
//               resize: {
//                 enabled: true
//               },
//               lineWidth: 2
//             }, {
//               labels: {
//                 align: 'right',
//                 x: -3
//               },
//               title: {
//                 text: '成交量'
//               },
//               top: '65%',
//               height: '35%',
//               offset: 0,
//               lineWidth: 2
//             }],
//             series: [{
//               type: 'candlestick',
//               name: code,
//               color: 'green',  // 跌时的颜色
//               lineColor: 'green',
//               upColor: 'red',  // 涨时的颜色
//               upLineColor: 'red',
//               data: ohlc,
//               id: 'sz'
//             }, {
//               type: 'column',
//               name: '成交量',
//               data: volume,
//               yAxis: 1
//             }]
//           });
//         })
//       .catch(error => {
//         console.error('Error fetching stock data:', error);
//       });
//   }, [code]);

//   return (
//     <HighchartsReact
//       highcharts={Highcharts}
//       constructorType={'stockChart'}
//       options={chartOptions}
//     />
//   );
// };

// export default StockChart;

  
  






//无code参数版本
// import React, { useState, useEffect } from 'react';
// import Highcharts from 'highcharts/highstock';
// import HighchartsReact from 'highcharts-react-official';
// import axios from 'axios';

// const StockChart = ({ code, frequency }) => {
//   const [chartOptions, setChartOptions] = useState({});

//   useEffect(() => {
//     if (!code || !frequency) return;

//     Highcharts.setOptions({
//       lang: {
//         rangeSelectorZoom: ''
//       }
//     });

//     const payload = {
//       code: code,
//       month: "12",
//       frequency: frequency  // 使用传入的frequency参数
//     };

//     axios.post('api/stock/stock_kline', payload)
//       .then(response => {
//         const rawData = response.data.data.data;
//         let ohlc = [], volume = [];

//         rawData.forEach(item => {
//           const year = parseInt(item.date.substring(0, 4), 10);
//           const month = parseInt(item.date.substring(5, 7), 10) - 1; // 月份从0开始计数
//           const day = parseInt(item.date.substring(8, 10), 10);
//           const hour = parseInt(item.time.substring(8, 10), 10);
//           const minute = parseInt(item.time.substring(10, 12), 10);
//           const second = parseInt(item.time.substring(12, 14), 10);

//           const utcTimestamp = Date.UTC(year, month, day, hour, minute, second);

//           ohlc.push([
//             utcTimestamp, // 时间戳
//             parseFloat(item.open),   // 开盘价
//             parseFloat(item.high),   // 最高价
//             parseFloat(item.low),    // 最低价
//             parseFloat(item.close)   // 收盘价
//           ]);
//           volume.push([
//             utcTimestamp,  // 时间戳
//             parseInt(item.volume)  // 成交量
//           ]);
//         });

//         setChartOptions({
//           rangeSelector: {
//             selected: 1,
//             inputDateFormat: '%Y-%m-%d'
//           },
//           title: {
//             text: '平安银行历史股价'
//           },
//           xAxis: {
//             dateTimeLabelFormats: {
//               millisecond: '%H:%M:%S.%L',
//               second: '%H:%M:%S',
//               minute: '%H:%M',
//               hour: '%H:%M',
//               day: '%m-%d',
//               week: '%m-%d',
//               month: '%y-%m',
//               year: '%Y'
//             }
//           },
//           tooltip: {
//             split: false,
//             shared: true,
//           },
//           yAxis: [{
//             labels: {
//               align: 'right',
//               x: -3
//             },
//             title: {
//               text: '股价'
//             },
//             height: '65%',
//             resize: {
//               enabled: true
//             },
//             lineWidth: 2
//           }, {
//             labels: {
//               align: 'right',
//               x: -3
//             },
//             title: {
//               text: '成交量'
//             },
//             top: '65%',
//             height: '35%',
//             offset: 0,
//             lineWidth: 2
//           }],
//           series: [{
//             type: 'candlestick',
//             name: code,
//             color: 'green',  // 跌时的颜色
//             lineColor: 'green',
//             upColor: 'red',  // 涨时的颜色
//             upLineColor: 'red',
//             data: ohlc,
//             id: 'sz'
//           }, {
//             type: 'column',
//             name: '成交量',
//             data: volume,
//             yAxis: 1
//           }]
//         });
//       })
//       .catch(error => {
//         console.error('Error fetching stock data:', error);
//       });
//   }, [code, frequency]);  // 添加frequency到依赖数组中

//   return (
//     <HighchartsReact
//       highcharts={Highcharts}
//       constructorType={'stockChart'}
//       options={chartOptions}
//     />
//   );
// };

// export default StockChart;
